<template>
    <div class="">
      <div class="head">
        <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="auto">
          <el-form-item label="" prop="name">
            <el-input v-model="queryParams.name" placeholder="请输入活动名称" clearable size="small"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="活动状态：" prop="status">
             <el-select v-model="queryParams.status" placeholder="请选择">
              <el-option v-for="item in recordTypeList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
  
      <div class="listBox">
        <div class="listBox_head">
          <el-button type="primary"  @click="handleAdd">新增限时打卡活动</el-button>
        </div>
        <el-table v-loading="loading" :data="customerList" stripe border>
            <el-table-column label="序号" type="index" width="55" align="center" fixed />
            <el-table-column label="活动名称" align="center" prop="name" :show-overflow-tooltip="true" />
            <el-table-column label="活动时间" align="center"  :show-overflow-tooltip="true" >
              <template slot-scope="scope" >
                <div>{{scope.row.startTime}}</div>
                <div>{{scope.row.endTime}}</div>
              </template>
            </el-table-column>
            <el-table-column label="奖励类型" align="center"  :show-overflow-tooltip="true" >
              <template slot-scope="scope" >
                <div v-if="scope.row.integralType == 1">CoCo</div>
                <div v-else-if="scope.row.integralType == 2">椰分</div>
                <div v-else>--</div>
              </template>
            </el-table-column>
            <el-table-column label="参与订单数" align="center" prop="orderNum" :show-overflow-tooltip="true" />
            <el-table-column label="活动状态" align="center" prop="createTime" :show-overflow-tooltip="true" >
              <template slot-scope="scope" >
                <dict-tag :options="recordTypeList" :value="scope.row.status" />
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
                <template slot-scope="scope" >
                  <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
                </template>
              </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </div>
    </div>
  
  </template>
  
  <script>
    import {
      shenyeLimitTimeList,
    } from "@/api/blindBox/timeLimitActivities";
    export default {
      name: "Customer",
      props: { },
      data() {
        return {
          // 遮罩层
          loading: false,
          // 总条数
          total: 0,
          // 乐园活动表格数据
          customerList: [],
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            name: null, //活动名称
            status: null, //活动状态	
          },
          recordTypeList: [], //状态
        };
      },
      created() {
        this.getadminDict()
        this.getList();
      },
      methods: {
        getadminDict() {
        //获取商户类型字典
        var dictType = "shenye_limit_time_activity_status";
        this.$getSelectList(dictType)
            .then((res) => {
            this.recordTypeList = res.result[0].dictList;
            })
        },
        /** 查询列表 */
        getList() {
        //   console.log(this.type)
          this.loading = true;
          shenyeLimitTimeList(this.queryParams).then(response => {
              this.loading = false;
              this.total = response.result.total
              this.customerList = response.result.records
            //   this.customerList = this.customerList.map(item => {
            //     // console.log('item',item)
            //     Object.keys(item).forEach(key => {
            //       if (item[key] === '') {
            //         item[key] = '-'
            //       }
            //     })
            //     return item
            //   })
            }).finally(() => {
              this.loading = false;
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          // this.resetForm();
          this.$refs["queryForm"].resetFields();
          this.handleQuery();
        },
      //新增限时打卡活动
      handleAdd(){
        this.$router.push({
            path: '/blindBox/add-timeLimitActivities',
            query: {
                pathType: 'add',
            }
        })
      },
      //编辑活动
      handleEdit(row){
        this.$router.push({
            path: '/blindBox/add-timeLimitActivities',
            query: {
                pathType: 'edit',
                id: row.id
            }
        })
       },
      }
    };
  
  </script>
  <style lang="scss" scoped>
    .head {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      padding: 20px 20px 0;
    }
  
    .listBox {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      //   height: 120px;
      padding: 20px 20px;
      margin-top: 10px;
    }
  
    .listBox_head {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 14px;
    }
  
  </style>
  